<!DOCTYPE html>

<html>

	<head>
		
		<!-- Title -->
		<title>4 Column Pricing Table - CheerApp HTML Template Demo</title>
		
		<!-- Meta tags -->
		<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
		
		<!-- CSS -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/light-blue.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="css/prettyPhoto.css" />
		
		<!-- JavaScript -->
		<script src="js/forms.js" type="text/javascript"></script>
		<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
		<script src="js/royal.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			document.documentElement.className += 'js-ready';
		
			H5F.listen(window,"load",function () {
				H5F.setup(document.getElementById("comment-form"), {
    				validClass: "valid",
    				invalidClass: "invalid",
    				requiredClass: "required",
    				placeholderClass: "placeholder"
				});
			},false);
		</script>
		
		<!-- IE scripts and stylesheets -->
		<!--[if lt IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
			<script src="js/iefixes.js" type="text/javascript"></script>
		<![endif]-->
		
	
	</head>
	
	
	<body>
	
		<div id="wrap">
		
			<header id="header">
				<div class="inner-wrap clearfix">
				
					<h1 id="logo">
						<a href="index.html">CheerApp - Premium HTML App Template - Demo</a>
					</h1>
					
					<nav class="dropdown">
						<ul id="nav" class="clearfix">
							<li>
								<a href="index.html">Home</a>
							</li>
							<li>
								<a href="#">Features</a>
								<ul>
									<li><a href="4-column-pricing.html">Pricing&nbsp;tables</a>
										<ul>
											<li><a href="3-column-pricing.html">Three&nbsp;columns</a></li>
											<li><a href="4-column-pricing.html">Four&nbsp;columns</a></li>
											<li><a href="5-column-pricing.html">Five&nbsp;columns</a></li>
										</ul>
									</li>
									<li><a href="wiki.html">Knowledgebase</a>
										<ul>
											<li><a href="wiki-single.html">Single&nbsp;article</a></li>
											<li><a href="wiki.html">Archive</a></li>
										</ul>
									</li>
									<li><a href="register.html">Registration&nbsp;Form</a></li>
									<li><a href="elements.html">Styling&nbsp;demos</a></li>
								</ul>
							</li>
							<li><a href="wiki.html">Knowledgebase</a>
								<ul>
									<li><a href="wiki-single.html">Single&nbsp;article</a></li>
									<li><a href="documentation/index.html">Documentation</a></li>
									<li><a href="contact.html">Contact&nbsp;support</a></li>
								</ul>
							</li>
							<li><a href="4-column-pricing.html">Pricing</a>
								<ul>
									<li><a href="3-column-pricing.html">Three&nbsp;columns</a></li>
									<li><a href="4-column-pricing.html">Four&nbsp;columns</a></li>
									<li><a href="5-column-pricing.html">Five&nbsp;columns</a></li>
								</ul>
							</li>
							<li><a href="blog.html">Blog</a>
								<ul>
									<li><a href="blog-single.html">Single&nbsp;post</a></li>
									<li><a href="blog.html">Monthly&nbsp;archives</a></li>
								</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul><!-- end #nav -->
					</nav>
					
					<div class="login">
						
						<!-- Use "user-info" div once the user has logged in and hide the login/register links and login form -->
						<!--						
						<div class="user-info">
							<p>Logged in as <span class="username">Username</span> <a class="logout" href="#">(logout)</a></p>
						</div>
						-->
						
						<ul class="login-links">
							<li><a href="register.html">Register</a></li>
							<li><a class="login-link" href="#">Login</a></li>
						</ul><!-- end .login-links -->
						
						<form id="login-form" method="post" action="#">
						
							<p>
								<label for="username">Username</label>
								<input name="username" value="" id="username" type="text" required placeholder="Username" />
							</p>
							<p>
								<label for="password">Password</label>
								<input name="password" value="" id="password" type="password" required placeholder="Password" />
							</p>
							<p class="forgot"><a href="#">Forgot?</a></p>
							<p>
								<input class="login-submit" type="submit" value="Login" name="submit" />
							</p>
						
						</form>
						
					</div><!-- end #login -->
					
				</div><!-- end .inner-wrap -->
			</header><!-- end header -->
			
			
			<div id="featured">
				<div class="inner-wrap">
				
					<div class="breadcrumb">
						<h2>
							<small>Purchase /</small>
							Plans &amp; pricing
						</h2>
					</div>
					
					<form id="searchform" method="get" action="search.html" class="clearfix">
						<p>
							<input type="text" value="" name="s" id="s" placeholder="Start searching..." autocomplete="off" />
						</p>
						<p>
							<input type="submit" id="searchsubmit" value="" />
						</p>
					</form>
				
				</div><!-- end .inner-wrap -->
			</div><!-- end #featured -->
			
			
			<div id="main">
				<div class="inner-wrap clearfix">
				
					<div class="content content-full">
					
						<div class="aligncenter">
							<h3 class="no-margin"><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis iaculis urna ut mollis.</em></h3>
							<p>
								Pricing tables, FAQs and other features coming along with great design and flexibility. <a class="more" href="#">Learn more</a>
							</p>
						</div><!-- end .aligncenter -->
					
						<div id="pricing">
							<table cellpadding="0" cellspacing="0" border="0">
								<thead>
									<tr>
										<td>
											<h3>Free</h3>
											<a class="button" href="#">Choose plan</a>
										</td>
										<td>
											<h3>Standard</h3>
											<a class="button" href="#">Choose plan</a>
										</td>
										<td class="highlight">
											<h3>Proffessional</h3>
											<a class="button" href="#">Choose plan</a>
										</td>
										<td>
											<h3>Developer</h3>
											<a class="button" href="#">Choose plan</a>
										</td>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>
											<ul>
												<li>
													<strong>1 </strong>user
													<span class="details">Lorem ipsum dolor sit amet.</span>
												</li>
												<li>
													<strong>Non-commercial </strong>use
													<span class="details">Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>. Lorem ipsum dolor consectetur.</span>
												</li>
												<li>
													<strong>1GB </strong>storage
													<span class="details">Storage lorem ipsum dolor sit amet <a href="#">1GB = 1000MB</a>.</span>
												</li>
												<li>
													<strong>500GB </strong>bandwidth
													<span class="details">Bandwidth is lorem ipsum dolor.</span>
												</li>
											</ul>
										</td>
										<td>
											<ul>
												<li>
													<strong>1 </strong>user
													<span class="details">Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>. Lorem ipsum dolor consectetur.</span>
												</li>
												<li>
													<strong>Commercial </strong>use
												</li>
												<li>
													<strong>5GB </strong>storage
													<span class="details">Lorem ipsum dolor sit amet, consectetur.</span>
												</li>
												<li>
													<strong>750GB </strong>bandwidth
												</li>
											</ul>
										</td>
										<td class="highlight">
											<ul>
												<li>
													<strong>5 </strong>users
													<span class="details">Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>. Lorem ipsum dolor consectetur.</span>
												</li>
												<li>
													<strong>Commercial </strong>use
												</li>
												<li>
													<strong>10GB </strong>storage
												</li>
												<li>
													<strong>1TB </strong>bandwidth
													<span class="details">Bandwidth is lorem ipsum dolor.</span>
												</li>
											</ul>
										</td>
										<td>
											<ul>
												<li>
													<strong>&#8734; </strong>users
												</li>
												<li>
													<strong>Commercial </strong>use
												</li>
												<li>
													<strong>&#8734; </strong>storage
													<span class="details">Storage lorem ipsum dolor sit amet <a href="#">1GB = 1000MB</a>.</span>
												</li>
												<li>
													<strong>&#8734; </strong>bandwidth
													<span class="details">Bandwidth is lorem ipsum dolor.</span>
												</li>
											</ul>
										</td>
									</tr>
									<tr class="price">
										<td>
											<span>Free</span>
										</td>
										<td>
											<span>$35<small>per month</small></span>
										</td>
										<td class="highlight">
											<span>$100<small>per month</small></span>
										</td>
										<td>
											<span>$300<small>per month</small></span>
										</td>
									</tr>
								</tbody>
							</table>
						</div><!-- end #pricing -->
						
						<div class="pagination clearfix">
							<span class="prev"><a href="3-column-pricing.html#main">3 column pricing table</a></span>
							<span class="next"><a href="5-column-pricing.html#main">5 column pricing table</a></span>
						</div><!-- end .pagination -->
						
					</div><!-- end .content -->
					
				</div><!-- end .inner-wrap -->
			</div><!-- end #main -->
		
		</div><!-- end #wrap -->
		
		
		<footer id="footer">
			<div class="inner-wrap">
			
				<nav>
					<ul id="footer-nav" class="clearfix">
						<li><a href="index.html">Home</a></li>
						<li><a href="4-column-pricing.html">Sign up</a></li>
						<li><a href="#">Legal</a></li>
						<li><a href="wiki.html">Support</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</nav>
				
				<!-- Set margin-top on logo to negative half of image height (to center it vertically) in CSS (.footer-logo) -->
				<a href="index.html"><img class="footer-logo" src="images/light-blue/logo-small.png" width="107" height="39" alt="logo" /></a>
				
				<small class="copyright">&copy;2011&nbsp;&nbsp;&middot;&nbsp;&nbsp;CheerApp HTML template by <a href="http://themeforest.net/user/pogoking?ref=pogoking">Mateusz Hajdziony</a></small>
			
			</div>
		</footer><!-- end footer -->
	
	</body>

</html>